<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>props绑定</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id="demo1">
<table>
	<tr charoff="2">父数据绑定</tr>
		<tr><td>age</td>
	<td>{{ age }}</td>
	<td><input type="text" v-model="age"></td>
	</tr>
	<tr><td>sex</td>
	<td>{{ sex }}</td>
	<td><input type="text" v-model="sex"></td>
	</tr>
	</table>
	
	<!--
	<tmp v-bind:age="age" v-bind:sex="sex"></tmp>

	<h1>双向绑定</h1>
	<tmp v-bind:age.sync="age" v-bind:sex.sync="sex"></tmp>
	-->
	<h1>单次绑定（刷新有效）</h1>
	<tmp v-bind:ages.once="age" v-bind:sex.once="sex"></tmp>

		
</div>
	<template id="demo6">
	<table>
	<tr charoff="2">子数据绑定</tr>
		<tr><td>age</td>
	<td>{{ age }}</td>
	<td><input type="text" v-model="age"></td>
	</tr>
	<tr><td>sex</td>
	<td>{{ sex }}</td>
	<td><input type="text" v-model="sex"></td>
	</tr>
	</table>
	</template>

<script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript">
	new Vue({
    		el:"#demo1",
    		data: {
                    age: 0,
                    sex: 'Male'
                },
    		components:{
    			"tmp":{
    				template:"#demo6",
    				props: ['ages', 'sex']
    			}
    		}
    	})
     </script>
</body>
</html>